<!DOCTYPE HTML>

<html lang="pt-br"  
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	
<ui:composition template="/WEB-INF/template/ConhecimentoTemplate.xhtml">
<ui:define name="corpo">
	<style type="text/css">
	.div-tela 
	{
		max-width: auto;
		padding: 10px 10px 10px;
	    margin: 0 auto 20px;
	    background-color: #fff;
	    border: 1px solid #e5e5e5;
	    -webkit-border-radius: 5px;
	    	-moz-border-radius: 5px;
	        	border-radius: 5px;
	    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
	    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
	        	box-shadow: 0 1px 2px rgba(0,0,0,.05);
	}
	.colunaEsquerda
	{  
	    text-align: left;
	    width: 30%;  
	}  
	.colunaDireita
	{  
	    text-align: left;
	    width: 70%;
	}
	.pnlMindMap
	{
		max-width: auto;
		height: auto;
	}   
	.mindMap
	{
		max-width: auto;
		height: 450px;
		border: 1px solid black;
	}   
	</style>
<div class="div-tela">
	
	<p:panel id="pnlMindMapVenda" header="Mapa Mental Vendas" styleClass="pnlMindMap">
		<p:mindmap id="mndVenda" value="#{mindMapVendaManagerBean.rootDallas}" styleClass="mindMap">
			<p:ajax event="select" listener="#{mindMapVendaManagerBean.onNodeSelect}"/>
			<p:ajax event="dblselect" listener="#{mindMapVendaManagerBean.onNodeDbSelect}" update="pnlDetalheVendedor, pnlDetalheVendedorMes"/>
		</p:mindmap>
	</p:panel>	
</div>	
</ui:define>
<ui:define name="modal">
	<p:dialog id="modalDetalheVendedor"
			widgetVar="diagDetalheVendedor" 
			header="#{mindMapVendaManagerBean.tituloModalSemana}"
			modal="true"
			showEffect="fade"
			hideEffect="fade"
			resizable="false"
			width="800"
			position="top">
		<p:panel id="pnlDetalheVendedor">
			<p:dataTable id="tblDetalheVendedor"
				var="dadoDetalhe"
				value="#{mindMapVendaManagerBean.listaDetalhadaVendedor}"
				emptyMessage="Não há Dados Para Exibição.">
			
				<p:column headerText="Vendedor" width="35%">
					<h:outputText value="#{dadoDetalhe.funcionarioVo.nome}" />
				</p:column>
		        
		        <p:column headerText="Dias Trabalho" width="5%">
					<h:outputText value="#{dadoDetalhe.diasTrabalho}" />
				</p:column>
		        
		        <p:column headerText="Tot. Vda Dia" width="30%">
					<h:outputText value="#{dadoDetalhe.valorTotalCompraDia}">
						<f:convertNumber currencySymbol="R$" type="currency"/> 
					</h:outputText>
				</p:column>
		        		
				<p:column headerText="Tot. Vda Semana" width="30%">
					<h:outputText value="#{dadoDetalhe.valorTotalCompra}">
						<f:convertNumber currencySymbol="R$" type="currency"/> 
					</h:outputText>
				</p:column>
			</p:dataTable>	
		</p:panel>
	</p:dialog>
	
	<p:dialog id="modalDetalheVendedorMes"
			widgetVar="diagDetalheVendedorMes" 
			header="#{mindMapVendaManagerBean.tituloModalMes}"
			modal="true"
			showEffect="fade"
			hideEffect="fade"
			resizable="false"
			width="800"
			position="top">
		<p:panel id="pnlDetalheVendedorMes">
			<p:dataTable id="tblDetalheVendedorMes"
				var="dadoDetalheMes"
				value="#{mindMapVendaManagerBean.listaDetalhadaVendedor}"
				emptyMessage="Não há Dados Para Exibição.">
			
				<p:column headerText="Vendedor" width="35%">
					<h:outputText value="#{dadoDetalheMes.funcionarioVo.nome}" />
				</p:column>
		        
		        <p:column headerText="Dias Trabalho" width="5%">
					<h:outputText value="#{dadoDetalheMes.diasTrabalho}" />
				</p:column>
		        
		        <p:column headerText="Tot. Vda Dia" width="30%">
					<h:outputText value="#{dadoDetalheMes.valorTotalCompraDia}">
						<f:convertNumber currencySymbol="R$" type="currency"/> 
					</h:outputText>
				</p:column>
		        		
				<p:column headerText="Tot. Vda Semana" width="30%">
					<h:outputText value="#{dadoDetalheMes.valorTotalCompra}">
						<f:convertNumber currencySymbol="R$" type="currency"/> 
					</h:outputText>
				</p:column>
			</p:dataTable>	
		</p:panel>
	</p:dialog>
</ui:define>
</ui:composition>
</html>